<template>
    <div>
        <div infinite-scroll-distance="20" v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled">
            <p v-for="(v,k) of n" :key="k">{{v}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            n:30,
            disabled:false
        }
    },
    methods:{
        loadMore(){
            //显示加载提示框
            this.$indicator.open({
                text:"加载中...",
                spinnerType:"fading-circle"
            });
            //禁用，也就是说上一次没有处理完成之前，即使再次进行滚动范围也不再出发滚动函数
            this.disabled=true;
            //假设服务器5s以后才能完成累加业务
            window.setTimeout(()=>{
                this.n+=30;
                //当处理完成之后，再次进行滚动范围时要继续触发滚动函数
                this.disabled=false;
                //关闭加载提示框
                this.$indicator.close();
            },5000);
            
        }
    }
}
</script>